<template>
	<view class="navBar">
		<!-- 状态栏占位 -->
		<view class="statusTitle" :style="{height:statusBarHeight + 'px'}"></view>
		<!-- 标题栏，与胶囊按钮对齐 -->
		<view class="titleBar" :style="{height:titleBarHeight + 'px'}">
			<view class="name">{{title}}</view>
			<navigator url="/pages/search/search" class="search">
				<uni-icons type="search" size="20" ></uni-icons>
				<text>搜索</text>
			</navigator>
			</view>
			
	</view>
	//防止因为固定定位导致轮播图的高度被压缩
	<view class="fill " :style="{height:(statusBarHeight+titleBarHeight-20) + 'px'}"></view>
</template>

<script setup>
	import {ref} from 'vue'
	//使用同步方法获取系统信息
	let systemInfo = uni.getSystemInfoSync()
	//状态栏的高度
	const statusBarHeight = systemInfo.statusBarHeight
	//时光胶囊的高度和距离状态栏的top值
	let {top,height} = uni.getMenuButtonBoundingClientRect()
	//整个时光胶囊的高度，里面包括自身高度和距离状态栏的卷
	let titleBarHeight = (top - statusBarHeight) * 2 + height
	defineProps({
		// 子组件接收父组件传来的数据
		title:{
			type:String,
			default:''
		}
	})
</script>

<style lang="scss" scoped>
	.navBar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		 background:
		 linear-gradient(to bottom,transparent,#fff 400rpx),
		 linear-gradient(to right,#beecd8 20%,#F4E2DB);
		
		.statusTitle {}
		.titleBar {
			display: flex;
			padding: 0 30rpx;
			align-items: center;
			.name {
				font-size: 22px;
				font-weight: bold;
			}
			.search {
				margin-left: 20rpx;
				width: 220rpx;
				border-radius: 60rpx;
				border: 1px solid aliceblue;
				padding: 20rpx;
				text-align: center;
				text{
					padding-left: 10rpx;
				}
			}
		}
	}
	
</style>